<script>
import HeightText from "@/components/HeightText.vue";
import YTableData from "@/mixin/YTableData";
import SearchForm from "./components/searchForm.vue";

export default {
  name: "User",
  components: {SearchForm, HeightText},
  mixins: [YTableData],
  data() {
    return {
      form: {value: ''},
      columns: [
        {
          prop: 'name',
          label: '姓名',
          width: '120',
          show: true,
          render: (h, scope) => {
            return h('HeightText', {
              props: {
                text: scope.cellValue,
                search: this.form.value
              }
            });
          }
        },
        {
          prop: 'age',
          label: '年龄',
          width: '120',
          show: true,
          formatter: (scope) => {
            return scope.cellValue + '岁';
          }
        },
        {
          prop: 'sex',
          label: '性别',
          width: '120',
          show: true,
          slotName: 'sex'
        },
        {
          prop: 'address',
          label: '地址',
          width: '200',
          show: true,
        },
        {
          prop: 'email',
          label: '邮箱',
          width: '160',
          show: true,
        },
      ],
      tableData: [
        {
          name: '张三',
          age: 18,
          sex: '男',
          address: '北京市朝阳区芍药居',
          email: 'zhangsan@163.com',
          phone: '123456789',
          birthday: '1990-01-01',
          remark: '备注信息',
        },
        {
          name: '李四',
          age: 19,
          sex: '女',
          address: '台湾省高雄市恒平路',
          email: 'lisi@163.com',
          phone: '987654321',
          birthday: '2000-10-01',
          remark: '备注信息',
        }
      ]
    };
  },
  created() {
    this.total = this.tableData.length
  },
  methods: {
    changeForm(val) {
      this.form = val
    }
  }
}
</script>

<template>
  <div>
    （配置用户信息，用户可以拥有多个角色【部门、组别】）
    <search-form :form="form" @form-change="changeForm"/>
    <YTable :height="height" :search="form.value" :columns="columns" :data="tableData">
      <template #sex="{cellValue}">
        <HeightText v-copy="`${cellValue}性`" :text="`${cellValue}性`" :search="form.value"/>
      </template>
    </YTable>
    <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="page_sizes"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
    />
  </div>
</template>

<style scoped>

</style>
